@import "../utils/var.scss";
@import "../utils/mixin.scss";

// 尺寸
/** @param $name 选择器 */
@mixin commonSize($name) {
  // 默认尺寸
  .#{$name} {
    font-size: $--font-size-base;
    padding: 6px 8px 10px 8px;
  }
  //拼合选择器 'sn-elname--'
  $curName: #{$name + $modifier-separator};
  @each $type in (medium, small, mini) {
    .#{$curName}#{$type} {
      @if $type == "medium" {
        font-size: $--font-size-medium;
        padding: 8px 10px;
        padding: 4px 8px 8px 6px;
      }
      @if $type == "small" {
        font-size: $--font-size-small;
        padding: 6px 8px;
        padding: 2px 6px 8px 4px;
      }
      @if $type == "mini" {
        font-size: $--font-size-mini;
        padding: 4px 6px;
        padding: 0px 6px 6px 2px;
      }
    }
  }
}

@mixin commonButtonSize($name) {
  // 默认尺寸
  .#{$name} {
    font-size: $--font-size-base;
    padding: 10px 8px 10px 8px;
  }
  //拼合选择器 'sn-elname--'
  $curName: #{$name + $modifier-separator};
  @each $type in (medium, small, mini) {
    .#{$curName}#{$type} {
      @if $type == "medium" {
        font-size: $--font-size-medium;
        padding: 8px 10px;
        padding: 4px 8px 8px 6px;
      }
      @if $type == "small" {
        font-size: $--font-size-small;
        padding: 6px 8px;
        padding: 2px 6px 8px 4px;
      }
      @if $type == "mini" {
        font-size: $--font-size-mini;
        padding: 4px 6px;
        padding: 0px 6px 6px 2px;
      }
    }
  }
}

@include b(radio) {
  width: fit-content;
  display: inline-flex;
  // vertical-align: -webkit-baseline-middle;
  justify-content: center;
  align-items: baseline;
  color: $--color-text-primary;
  font-size: $--font-size-base;
  user-select: none;

  & + & {
    margin-left: 10px;
  }

  // radio
  & > {
    input {
      cursor: pointer;
      /* 隐藏原生radio */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      border-radius: 50%;
      width: 16px;
      height: 16px;

      border: 1px solid $--border-color-base;
      margin-right: 5px;
      transition: 0.2s all linear;

      // radio 的位置
      position: relative;
      top: 4px;
    }
    label {
      cursor: pointer;
    }

    /* 选中状态图标 */
    input:checked {
      border: 6px solid $--color-primary;
    }
  }

  // border 模式
  @include e(border) {
    cursor: pointer;
    padding: 6px 8px 10px 8px;
    border: $--radio-button-default-border;
    border-radius: $--border-radius-base;

    &:hover {
      color: $--color-primary;
    }

    ~ {
      @include commonSize(sn-radio);
    }
  }


  // 禁用
  @include when(radio-disabled) {
    cursor: not-allowed;
    user-select: none;
    color: $--color-text-placeholder;
    input,
    label {
      pointer-events: none;
    }
  }
}

@include b(radio-group) {

  // button 模式
  @include e(button) {
    cursor: pointer;
    padding: 10px 8px 10px 8px;
    border: $--border-base;
    border-radius: $--border-radius-base;
  
    & + &{
      margin-left:0px ;
      border-left: none;
      border-radius: none;
    }
  
    // ~ {
    //   @include commonButtonSize(sn-radio);
    // }
  }
}
